<template>
    <div class="changePassword">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        修改密码
      </div>
      <div class="content">
        <div class="form">
          <div class="form-block-item">
            <div class="left">原密码</div>
            <div class="right"><input class="ipt" type="password" placeholder="请输入与原密码" v-model="oldPwd" @blur="oldPwdLine=false" @focus="oldPwdLine=true"></div>
          </div>
          <div class="line-1px">
            <div class="act-1px" :class="{active:oldPwdLine}"></div>
          </div>
          <div class="form-block-item">
            <div class="left">设置密码</div>
            <div class="right"><input class="ipt" type="password" placeholder="请设置6-12位密码" v-model="newPwd" @blur="newPwdLine=false" @focus="newPwdLine=true"></div>
          </div>
          <div class="line-1px">
            <div class="act-1px" :class="{active:newPwdLine}"></div>
          </div>
          <div class="form-block-item">
            <div class="left">确认密码</div>
            <div class="right"><input class="ipt" type="password" placeholder="请再次输入密码" v-model="confirmPwd" @blur="confirmPwdLine=false" @focus="confirmPwdLine=true"></div>
          </div>
          <div class="line-1px">
            <div class="act-1px" :class="{active:confirmPwdLine}"></div>
          </div>
        </div>
        <div class="btn-wrapper">
          <button class="btn-modify" @click="_changePassword">修改</button>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import {getStorage} from "../../../common/js/localStorage"
  import {Toast} from "mint-ui"
  import global from '../../../common/js/global'

  export default {
        name: "changePassword",
        data(){
          return{
            oldPwdLine:false,
            newPwdLine:false,
            confirmPwdLine:false,
            oldPwd:'',
            newPwd:'',
            confirmPwd:'',
          }
        },
        created(){
        },
        methods:{
          _changePassword(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/changePassword',
                data:{
                  newPassword:this.newPwd,
                  oldPassword:this.oldPwd,
                  confirmPassword: this.confirmPwd
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  let data = res.data.data
                  Toast(data.msg)
                  setTimeout(()=>{
                    this.$router.push('/index/user')
                  },1000)
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('错误代码:'+res.status)
              }

            })
          }
        },
        components:{
          'back':back
        }
    }
</script>

<style scoped lang="stylus">
  .changePassword
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    .title
      position relative
      padding-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      padding 10px 35px 0 35px
      .form
        .line-1px
          height 1px
          background #343434
          .act-1px
            height 1px
            width 0
            transition width .3s
            background #F7C20F
            &.active
              width 100%
              transition width .3s
        .form-block-item
          height 54px
          display flex
          line-height 54px
          .left
            flex 0 0 70px
            color #F7C20F
            font-size 16px
            text-align left
          .right
            flex 1
            height 100%
            .ipt
              height 100%
              width calc(100% - 19px)
              padding-left 19px
              background none
              outline none
              border none
              font-size 16px
              color #ffffff
      .btn-wrapper
        padding 45px 1px 0px 1px
        .btn-modify
          width 100%
          height 37px
          background #F7C20F
          color #333333
          border none
          border-radius 4px
          outline none
          font-size 16px
          &:active
            background #ebb90e
</style>
